
<template>
<el-row type = "flex" justify="center">
    <el-col :span = "6">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>网络流</span>
                </div>
            </template>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="点数">
                    <el-input v-model="form.PointNum"></el-input>
                </el-form-item>
                <el-form-item label="边数">
                    <el-input v-model="form.EdgeNum"></el-input>
                </el-form-item>
                <el-form-item label="起点">
                    <el-input v-model="form.Start"></el-input>
                </el-form-item>
                <el-form-item label="终点">
                    <el-input v-model="form.End"></el-input>
                </el-form-item>
                <el-from-item 
                  v-for="(edge,index) in form.Edges"
                  :key="edge.key"
                  :prop ="'Edges.' + index + '.value'"
                  :rules="{
                      required: true, message: '边不能为空', trigger: 'blur'
                    }"
                >
                  <el-row :gutter="20">
                    <el-col :span = "6">
                        <el-input 
                        v-model="edge.from" 
                        placeholder="起点"
                        ></el-input>
                    </el-col>
                    <el-col :span = "6">
                        <el-input 
                        v-model="edge.to" 
                        placeholder="终点"
                        ></el-input>
                    </el-col>
                    <el-col :span = "6">
                        <el-input 
                        v-model="edge.value" 
                        placeholder="边权"
                        ></el-input>
                    </el-col>
                    <el-col :span = "6">
                        <el-button @click.prevent="removeEdge(edge)">删除</el-button>
                    </el-col>
                  </el-row>
                </el-from-item>
                 <el-divider></el-divider>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit()">提交</el-button>
                  <el-button @click="addEdge">新增边</el-button>
                  <el-button @click="ClearEdge()">清空</el-button>
                </el-form-item>
            </el-form>  
        </el-card>
    </el-col>
</el-row>
</template>

<script>
  import { ElMessage } from 'element-plus'
  import { MaxFlow } from '../myDll'

  export default {
    data() {
      return {
        form: {
          PointNum:0,
          EdgeNum:0,
          Start:0,
          End:0,
          Edges:[{
            from:'',
            to:'',
            value:''
          }]
        }
      }
    },
    mounted(){
      // this.AutoAddEdge()
    }
    ,
    methods: {
      Result(ans){
        this.$alert(ans, '结果', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'success',
              message: `${ action }`
            });
          }
        });
      },
      InitArr(){
        let arr = []
        arr.push(Number(this.form.PointNum))
        arr.push(Number(this.form.EdgeNum))
        arr.push(Number(this.form.Start))
        arr.push(Number(this.form.End))
        for(var i = 0;i<this.form.Edges.length;i++){
          arr.push(Number(this.form.Edges[i].from))
          arr.push(Number(this.form.Edges[i].to))
          arr.push(Number(this.form.Edges[i].value))
        }
        return arr;
      },
      onSubmit() {
        if(this.form.Edges.length>this.form.EdgeNum){
            ElMessage.error('边超出边总数')
            return ;
        }
        for(var i =0;i<this.form.Edges.length;i++){
          var cnt = i + 1;
          if(this.form.Edges[i].from>this.form.PointNum || this.form.Edges[i].from<=0) {
            ElMessage.error('第'+cnt+'边起点超出范围')
            return ;
          }
          if(this.form.Edges[i].to>this.form.PointNum || this.form.Edges[i].to<=0) {
            ElMessage.error('第'+cnt+'边终点超出范围')
            return ;
          }
        }
        let arr = this.InitArr()
        if(arr.length > 10000 ) {
          ElMessage.error('输入图过大')
          return ;
        }
        let ans = MaxFlow(arr)
        this.Result(ans)
        console.log('Success')
      },
      ClearEdge(){
        this.form.Edges = []
      },
      removeEdge(item) {
        var index = this.form.Edges.indexOf(item)
        if (index !== -1) {
          this.form.Edges.splice(index, 1)
        }
      },
      addEdge(){
        this.form.Edges.push({
          value:'',
          key: Date.now()
        })
      }
    }
  }
</script>

<style>
.box-card{
    width: 400px;
}
.el-row {
    margin-bottom: 20px;
}
</style>
